import { defineComponent, reactive, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElDialog, ElButton, ElFormItem, ElSelect, ElOption, ElLink } from 'element-plus'

import type { AlarmQueryPropsType, AlarmQueryValuesType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { alarmNameEnum } from '~/store/monitor/typings'

import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'
// import AliIcon from '~/components/AliIocn'

export default defineComponent({
  name: 'AlarmQuery',
  props: ['visible', 'cancel', 'deviceId', 'deviceName'],
  setup(props: AlarmQueryPropsType) {
    const store = useStore()
    const router = useRouter()
    const proSaasTableRef = ref<ProSaasTableExposeType>()
    const formValues = reactive<AlarmQueryValuesType>({})
    const policeState = useVuexGetters('police', ['alarmNameOpt'])
    const columns: TableColumnProps<AlarmQueryValuesType>[] = [
      {
        label: '警报名称',
        prop: 'alarmName',
        minWidth: 160,
        showOverflowTooltip: true
      },
      {
        label: '警报时间',
        prop: 'reportTime',
        minWidth: 160,
        showOverflowTooltip: true
      },
      {
        label: '恢复时间',
        prop: 'recoverTime',
        minWidth: 160,
        showOverflowTooltip: true
      },
      {
        label: '报警值',
        prop: 'alarmValue',
        minWidth: 160,
        showOverflowTooltip: true
      },
      {
        label: '报警状态',
        prop: 'alarmState',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true,
        render: (_, value) => {
          return <>{value === 0 ? '已恢复' : '报警中'}</>
        }
      }
    ]

    onMounted(() => {
      //  警报名称
      store.dispatch('police/SelectAlarmBoxList')
    })
    // 清空搜索
    const clearSearchTable = async () => {
      setTimeout(() => {
        proSaasTableRef.value!?.toSearch()
      }, 100)
    }
    //  跳转到报警列表
    const alarmOpen = () => {
      const { deviceName } = props
      router.push({
        path: '/monitor/police/data',
        query: { deviceName, alarmName: formValues.alarmName }
      })
    }

    return () => {
      const { visible, cancel, deviceId } = props
      return (
        <ElDialog
          title="警报详情"
          width="75%"
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={cancel}
          v-slots={{
            footer: () => (
              <>
                <ElButton onClick={cancel}>取消</ElButton>
              </>
            )
          }}
        >
          <div style="text-align: right;">
            <ElLink type="primary" onClick={alarmOpen}>
              更多警报&gt;&gt;
            </ElLink>
          </div>
          <ProSaasTable<AlarmQueryValuesType>
            ref={proSaasTableRef}
            columns={columns}
            needPagination={false}
            searchParams={{
              current: 1,
              size: 10,
              deviceId,
              ...formValues
            }}
            searchFormProps={{
              model: formValues
            }}
            dispatchType="police/AlarmInfoList"
            searchformResponsiveCol={[
              <ElFormItem key="alarmName" prop="alarmName">
                <ElSelect
                  v-model={formValues.alarmName}
                  clearable
                  placeholder="警报名称"
                  onChange={clearSearchTable}
                >
                  {policeState.alarmNameOpt?.value?.map((item: alarmNameEnum) => (
                    <ElOption key={item?.id} label={item?.alarmName} value={item?.alarmName} />
                  ))}
                </ElSelect>
              </ElFormItem>
            ]}
          />
        </ElDialog>
      )
    }
  }
})
